<template>
    <div class="my_mall">
        <div class="mall_header" :style="{ backgroundImage: 'url(' + background + ')' }">
            <div class="mall_header_info">
                <div class="mall_header_name">{{ shop_info.name }}</div>
                <div class="mall_header_item">
                    <img src="@/assets/image/my3.png" alt="">
                    {{ $t('mall.地址') }}：{{ shop_info.address }}
                </div>
                <div class="mall_header_item">
                    <img src="@/assets/image/my4.png" alt="">
                    {{ $t('mall.电话') }}：{{ shop_info.phone }}
                </div>
                <div class="mall_header_item">
                    <img src="@/assets/image/my5.png" alt="">
                    {{ $t('mall.邮箱') }}：{{ shop_info.email }}
                </div>
            </div>

            <div class="mall_header_edit" @click="open_dialog('edit')">
                <i class="el-icon-edit-outline"></i>
                {{ $t('my.编辑') }}
            </div>
        </div>

        <div class="mall_view">
            <div class="tabs">
                <div class="item active">{{ $t('my.商品列表') }}</div>
                <div class="item" @click="open_dialog('release')">
                    {{ $t('mall.发布商品') }}
                </div>
            </div>
            <div class="list">
                <div class="item_view" v-for="(item, index) in list" :key="index">
                    <!-- @click="router" -->
                    <div class="item" @click="router(item)">
                        <img :src="item.images[0] || ''" alt="" class="cover">
                        <div class="name">{{ item.name }}</div>
                        <div class="other">
                            <div class="price">
                                <div class="unit">￥</div>
                                <div class="value">{{ item.price }}</div>
                            </div>
                            <div class="submit" @click.stop="removeShop(item)">{{ $t('mall.删除') }}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="page_view">
                <el-pagination background layout="prev, pager, next" hide-on-single-page :current-page="page" :total="total"
                    @current-change="change" />
            </div>
        </div>
        <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" top="50px" width="530px" :modal="true"
            :center="true" :show-close="false" append-to-body destroy-on-close>
            <MallRelease @ok="dialog_ok" @close="dialogVisible = false" v-if="type == 'release'" />
            <MallEdit :shop_id="shop_id" @ok="dialog_ok" v-else />
        </el-dialog>
    </div>
</template>

<script>
import { mapState } from "vuex";
import MallEdit from "@/components/my/MallEdit.vue"
import MallRelease from "@/components/my/MallRelease.vue"

export default {
    components: {
        MallEdit,
        MallRelease
    },
    data() {
        return {
            type: "",

            shop_id: null,
            shop_info: {},
            background: "",

            page: 1,
            list: [],
            total: 0,

            dialogTitle: "",
            dialogVisible: false,
        }
    },
    computed: {
        ...mapState({
            user: state => state.user
        })
    },
    created() {
        this.getShopInfo();
    },
    methods: {
        async getShopInfo() {
            let { userinfo } = await this.$api.usersApi.userIndex();
            this.shop_id = userinfo.shop_id;

            if (!userinfo.shop_id) return;
            let res = await this.$api.shopApi.shopInfo({
                user_id: this.user.user_id
            });
            this.shop_info = res.shop_info;
            this.background = res.shop_info.bg_image;
            this.getList();
        },
        async getList() {
            let { list: res } = await this.$api.shopApi.shopList({
                user_id: this.user.user_id,
                page: this.page
            });
            this.list = res.data;
            this.total = res.total;
        },
        change(value) {
            this.page = value;
            this.getList();
        },
        router(item) {
            let id = item.id;
            this.$router.push({
                name: 'mallDeta',
                query: {
                    id,
                    type: 'buy'
                }
            })
        },
        removeShop(item) {
            this.$confirm(this.$t('mall.确定删除该商品吗'), this.$t('msg.提示'), {
                confirmButtonText: this.$t('msg.确定'),
                cancelButtonText: this.$t('msg.取消'),
                type: 'warning'
            }).then(async () => {
                let ids = [item.id].join(',');
                await this.$api.shopApi.delete({
                    ids
                })
                this.$message({
                    message: this.$t('msg.删除成功'),
                    type: 'success'
                });
                this.page = 1;
                this.getList();
            }).catch(() => { });
        },
        open_dialog(type) {
            type = this.shop_id ? type : 'edit';
            this.type = type;
            if (type == 'edit') this.dialogTitle = this.$t('my.编辑资料');
            if (type == 'release') this.dialogTitle = this.$t('mall.新商品');
            this.dialogVisible = true;
        },
        dialog_ok(type) {
            this.dialogVisible = false;
            if (type == 'edit') {
                this.getShopInfo();
            } else {
                this.page = 1;
                this.getList();
            };
        }
    }
}
</script>

<style lang="scss" scoped>
.my_mall {
    flex: 1;

    .mall_header {
        height: 274px;
        border-radius: 16px 16px 16px 16px;
        padding: 0 16px;
        box-sizing: border-box;
        background: url(@/assets/image/bg1.png) no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .mall_header_info {
            .mall_header_name {
                font-weight: bold;
                font-size: 20px;
                color: #FFFFFF;
                margin-bottom: 25px;
            }

            .mall_header_item {
                font-size: 14px;
                color: #FFFFFF;
                margin-bottom: 20px;

                img {
                    width: 16px;
                    height: 17px;
                }
            }
        }

        .mall_header_edit {
            width: 125px;
            height: 52px;
            line-height: 52px;
            text-align: center;
            font-size: 18px;
            color: #E6ECFF;
            background-color: #4488FF;
            border-radius: 40px;
            cursor: pointer;
        }
    }

    .mall_view {
        border-radius: 10px 10px 0 0;
        margin-top: 16px;
        padding: 24px;
        box-sizing: border-box;
        background: #FCFCFE;

        .tabs {
            display: flex;

            .item {
                width: 128px;
                height: 45px;
                line-height: 45px;
                text-align: center;

                color: #2273FF;
                font-weight: bold;
                font-size: 18px;
                margin-right: 36px;
                background: rgba(34, 115, 255, 0.5);

                background: #F0F3F6;

                border-radius: 8px 8px 8px 8px;


                cursor: pointer;

                &.active {
                    color: #FFFFFF;

                    background: #2273FF;
                }
            }
        }

        .list {
            padding-top: 24px;
            box-sizing: border-box;
            display: flex;
            flex-wrap: wrap;

            // justify-content: space-between;
            .item_view {
                // flex: 1;
                width: 284px;
                padding: 0 10px;
                box-sizing: border-box;
            }

            .item {
                width: 264px;
                margin-bottom: 18px;

                .cover {
                    width: 264px;
                    height: 264px;
                    border-radius: 20px;
                }

                .name {
                    height: 44px;
                    line-height: 22px;
                    font-size: 16px;
                    color: #000000;
                    margin: 7px 0;
                    box-sizing: content-box;

                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    /* 显示的行数 */
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }

            .other {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .price {
                    display: flex;
                    align-items: baseline;

                    .unit {
                        font-weight: bold;
                        font-size: 16px;
                        color: #FA5151;
                    }

                    .value {
                        font-weight: bold;
                        font-size: 24px;
                        color: #FA5151;
                    }
                }

                .submit {
                    width: 72px;
                    height: 36px;
                    line-height: 36px;
                    text-align: center;
                    font-size: 16px;
                    color: #FFFFFF;
                    background: #FF4838;
                    border-radius: 66px 66px 66px 66px;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>